<template>
  <div>
    <input type="file" @change="onchange" />
    <div id="canvasWrap"></div>
  </div>
</template>
<script>
import { pdfReview } from '@/api/position/courseware';

export default {
  data() {
    return {
      
    };
  },
  mounted() {
    pdfReview('1775088191478263809').then(res=>{
      console.log('res',res);
      this.onchange(res.data)
    })
  },
  methods: {
    onchange(file) {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = e => {
        const url = e?.target?.result;
        const loadingTask = pdfjsLib.getDocument(url);
        loadingTask.promise.then(pdf => {
          const numPages = pdf.numPages;
          console.log(numPages);
          for (let i = 1; i <= numPages; i++) {
            pdf.getPage(i).then(function (page) {
              var viewport = page.getViewport({ scale: 1.5 });
              var canvas = document.createElement('canvas');
              var canvasWrap = document.getElementById('canvasWrap');
              canvasWrap.appendChild(canvas);
              var context = canvas.getContext('2d');
              canvas.height = viewport.height;
              canvas.width = viewport.width;
              var renderContext = {
                canvasContext: context,
                viewport: viewport,
              };
              page.render(renderContext);
            });
          }
        });
      };
    },
  },
};
</script>
<style scoped>
.iframe{
  width: 100vw;
  height: 100vh;
}
</style>
